<template>
  <div class="page">
    <OtherHeader pageTitle="我的建议"></OtherHeader>
    <div class="contain_wrap wrapper">
      <div class="content">
        <li class="qa_item" v-for="(item,index) in qaData" :key="item.id+'_'+index" >
          <div class="q_title" @click="showQuestion(item.title,item.content)">
            <svg t="1743616727144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9979"><path d="M821.333 800H547.584l-86.464 96.075a32 32 0 1 1-47.573-42.816l96-106.667A32 32 0 0 1 533.333 736h288a53.333 53.333 0 0 0 53.334-53.333v-448a53.333 53.333 0 0 0-53.334-53.334H202.667a53.333 53.333 0 0 0-53.334 53.334v448A53.333 53.333 0 0 0 202.667 736h138.666a32 32 0 0 1 0 64H202.667c-64.8 0-117.334-52.533-117.334-117.333v-448c0-64.8 52.534-117.334 117.334-117.334h618.666c64.8 0 117.334 52.534 117.334 117.334v448c0 64.8-52.534 117.333-117.334 117.333zM704 341.333a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h384zM512 512a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h192z" p-id="9980" fill="#7dc480"></path></svg>
            <span>{{item.title}}</span>
          </div>
        </li>
        <van-divider v-if="loadStatus&&qaData.length!==0">已加载所有问题</van-divider>
        <van-loading class="mar_top1" v-if="!loadStatus" size="24px" color="#deae76">加载中...</van-loading>
        <van-empty
            class="custom-image"
            v-if="loadStatus&&qaData.length===0"
            :image="emptyImage"
            description="暂无内容"
        />
      </div>
    </div>
  </div>
</template>

<script>
import OtherHeader from "@/components/OtherHeader";
//import BScroll from "better-scroll";
import axios from "axios";
//import $http from "@/service";

export default {
  name: 'ZWT',
  data() {
    return {
      qaData: [],
      loadStatus:false,
      emptyImage: require("../assets/empty.png"),
    }
  },
  created() {
    this.problemList()
  },
  methods: {
    showQuestion(title,content) {
      this.$dialog.confirm({
        title: title,
        message: content,
        showCancelButton: false, //展示取水按钮
        confirmButtonColor:"#1d66bb",
        confirmButtonText: "关闭", //改变确认按钮上显示的文字
        opts: () => {

        }
      });
    },
    problemList() {
      const url = "http://8.155.49.183/api/tfxq/findMessageList?tell="+this.$route.query.phone;
      axios.get(url,{},{
        headers: {
          'Content-Type': 'multipart/form-data' // 不需要设置Content-Type，axios会自动设置，但如果需要自定义，可以添加此行。默认情况下不需要设置。
        }
      }).then(response => {
        this.loadStatus = true
        if(response.data.success){
          this.qaData = response.data.page.datas
        }
      }).catch(error => {
        console.log("notice data error!",error)
        this.$toast('获取公告数据错误！');
        this.newsData = []
      });
    }
  },
  components: {OtherHeader}
}
</script>

<style lang="scss" scoped>
.contain_wrap {
  width: 100vw;
  height: 100vh;
  margin-top: 3.3rem;
  text-align: center;
  overflow: hidden;

  .content {
    width: 100%;
    padding:0.77rem 0 6.68rem;
    .qa_item {
      width: 90%;
      margin:0.77rem auto;
      padding:0.77rem 0.55rem;
      background:$sColor;
      text-align: left;
      overflow: hidden;
      border-radius: $bRadius;
      line-height: 1.8rem;
      .q_title {
        line-height: 1.54rem;
        padding: 0 0.26rem;
        display: flex;
        align-items: center;
        .icon{
          width:2.2rem;
          margin-right: 0.51rem;
          fill:$gColor;
        }
        span{
          flex: 1;
          color: $mColor;
          font-size: $mText;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          line-clamp:2;
          -webkit-line-clamp:2;
          overflow:hidden;
          text-overflow:ellipsis
        }
      }
      .a_text{
        margin:0.51rem 0 0 3.1rem;
        color:$vColor;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        line-clamp:2;
        -webkit-line-clamp:2;
        overflow:hidden;
        text-overflow:ellipsis
      }
    }
  }
}
</style>
